<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="spark-md5.js" type="text/javascript"></script>
    <style type="text/css">
        #jxtxt{display: none}
    </style>
</head>
<body>
<div>
    <p>大文件分片上传：</p>
    <input type="file" name="bigfile" id="bigfile">
    <input type="button" value="提交" id="btn">
    <p id="jxtxt">解析文件中...</p>
    <p>解析百分比：<span id="jx">0</span>%</p>
    <p>上传百分比：<span id="sc">0</span>%</p>
</div>
<script type="text/javascript">
    var jx=0;//解析百分比
    var sc=0;//上传百分比

    $('#btn').click(function(){
        jx=0;
        sc=0;
        var file=$('#bigfile')[0].files[0];
        if(!file){
            alert('没有选择文件');
            return false;
        }
        var fileSize=file.size;//文件大小
        var chunkSize=2*1024*1024;//切片大小2M
        var chunks =Math.ceil(fileSize/chunkSize);//切割数
        var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;//切割方法

        var spark=new SparkMD5.ArrayBuffer();
        var reader=new FileReader();
        var currentChunk=0;

        var totelSpark=new SparkMD5.ArrayBuffer();
        var readerAll=new FileReader();
        var totelMd5='';//整个文件的md5
        $('#jxtxt').show();
        $('#btn').attr('disabled','disabled');
        readerAll.readAsArrayBuffer(file);
        readerAll.onload=function(e){
            // 根据整个文件生产md5
            var result=e.target.result;
            totelSpark.append(result);
            totelMd5 = totelSpark.end();
            $('#jxtxt').hide();

            var list_md5=[];
            var upChunkNum=0;
            //用于生产md5码
            loadNext();
            reader.onload=function(e){
                var result=e.target.result;
                spark.append(result);
                currentChunk++;
                jx=(currentChunk/chunks)*100;
                jx=Math.floor(jx*100)/100;
                $('#jx').text(jx);
                if (currentChunk < chunks) {
                    var md5 = spark.end();
                    list_md5.push(md5);
                    loadNext();
                    // console.log('第'+currentChunk+'分片解析完成，开始解析'+(currentChunk + 1)+'分片');
                } else {
                    var md5 = spark.end();
                    list_md5.push(md5);
                    console.log('解析完成');
                    //进行分片上传请求
                    uploadFn(md5);
                }
            };

            function loadNext() {
                var start = currentChunk * chunkSize;
                var end = start + chunkSize > file.size ? file.size : (start + chunkSize);
                reader.readAsArrayBuffer(blobSlice.call(file, start, end));
            }

            function uploadFn(){
                for(var i=0;i<chunks;i++){
                    var formData=new FormData();//创建表单对象
                    var start = i * chunkSize;
                    var end = start + chunkSize > file.size ? file.size : (start + chunkSize);
                    var chunkBlob=blobSlice.call(file, start, end);
                    formData.append("bigFile",chunkBlob);

                    $.ajax({
                        url:'http://localhost:3000/bigUpload?md5='+totelMd5+'&fileName='+list_md5[i],
                        // url:'http://yr-if-war.dev.q1op.com/bigUpload?md5='+totelMd5+'&fileName='+list_md5[i],
                        data:formData,
                        type:'post',
                        dataType: "json",
                        processData: false,//用于对data参数进行序列化处理 这里必须false
                        contentType: false, //必须
                        success:function(result){
                            upChunkNum++;
                            sc=(upChunkNum/chunks)*100;
                            sc=Math.floor(sc*100)/100;
                            $('#sc').text(sc);
                            if(upChunkNum==chunks){
                                var allObj=JSON.stringify({
                                    "dirName":totelMd5,
                                    "fileName":file.name,
                                    "md5_list":list_md5
                                });
                                $.ajax({
                                    url:'http://localhost:3000/merge',
                                    // url:'http://yr-if-war.dev.q1op.com/merge',
                                    data:{"data":allObj},
                                    type:'post',
                                    dataType:'json',
                                    success:function(result){
                                        console.log(result)
                                        $("#btn").removeAttr("disabled");
                                    },
                                    error:function(){
                                        console.log('报错了')
                                        $("#btn").removeAttr("disabled");
                                    }
                                })
                            }
                        },
                        error:function(){
                            console.log('报错了')
                            $("#btn").removeAttr("disabled");
                        }
                    });
                }
            }
        };

    });
</script>
</body>
</html>
